<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <style>
    a{
      text-decoration: none;
      display: block;
      width: 150px;
      height: 30px;
      background-color: bisque;
      text-align: center;
      line-height: 30px;
      border-radius: 20px;
      margin-bottom:6px;
      color:black;  
    }
  </style> -->
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    body{
      background-image:url("images/1.jpg");
      /* 将背景图铺满整个容器 */
      background-size: cover;
    }
    img{
      width: 200px;
    }
    .box{
      position:absolute;
      left: 50%;
      transform: translateX(-50%) translateY(50%)
    }
  </style> -->
  <!-- <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    body{
      background-image: url('images/1.jpg')
    }
    img{
      width: 200px;
    }
    .box{
      position: absolute;
      left: 50%;
      transform:translateX(-50%) translateY(50%)
    }
  </style> -->
  <!-- <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .one{
      border:2px solid red;
    }
  </style> -->
<!-- <style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    color:#000;
  }
  .nav{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
  }
  .w{
    width: 980px;
    margin: 0 auto;
  }
  .w li{
    float: left;
  }
  .w a{
    display: block;
    /* 上下0,左右20px */
    padding:0 20px;
    height: 60px;
  }
  .active{
    background-color: orange;
    color: red;
  }
</style> -->
<!-- <style>
  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    color:#000;
  }
  .nav{
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
  }
  .w{
    width: 980px;
    height: 100%;
    background-color: aqua;
    margin: 0 auto;
  }
  .w li{
    float: left;
  }
  .w a{
    display: block;
    padding: 0 20px;
  }
  .active{
    background-color: orange;
    color:red;
  }
</style> -->
<!-- <style>
  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color:black;
    list-style: none;
  }
  .nav{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
  }
  .w{
    width: 980px;
    height: 100%;
    margin: 0 auto;
    background-color: aqua;
  }
  li{
    float:left;
  }
  a{
    display: block;
    padding:0 20px;
  }
  .active{
    background-color: orange;
    color:red;
  }
</style> -->
<!-- <style>
  div{
    width: 120px;
  }
  input[type="text"]{
    width: 80px;
    height: 80px;
    text-align:center;
    box-sizing: border-box;
    outline: none;
  }
  input[type="button"]{
    width: 40px;
    height: 40px;
  }
  input{
    float: left;
  }
</style> -->
<!-- <style>
  div{
    width: 120px;
  }
  input[type="text"]{
    width: 80px;
    height: 80px;
    text-align: center;
    outline: none;
    box-sizing: border-box;
  }
  input[type="button"]{
    width: 40px;
    height: 40px;
  }
  input{
    float: left;
  }
</style> -->
<style>
  table{
    width: 400px;
    height: 400px;
    margin:0 auto;
  }
  table,td{
    border: 1px solid red;
    /* 边框合并 */
    border-collapse: collapse;
  }


</style>
</head>
<body>
  <!-- <a href="javascript:;">点击切换图片</a>
  <img src="img/wc.jpg" alt="">
  <script>
    var a_btn = document.querySelector('a');
    var img = document.querySelector('img');
    a_btn.onclick = function(){
     var scr_wc = img.src.slice(img.src.lastIndexOf('/')+1)
     console.log(scr_wc)
     if(scr_wc === 'wc.jpg'){
       img.src = 'img/mm.gif'
     }else{
       img.src = 'img/wc.jpg'
     }
    }
  </script> -->
  <!-- <div class="box">

    我是div中的文字

    <p>我是短路中的文字</p>

  </div> -->
  <!-- <script>
    var div = document.querySelector('div');
    var p = document.querySelector('p');
    //获取
    console.log(div.innerText);
    console.log(div.textContent);
    console.log(div.innerHTML);
    //设置
    div.innerHTML =  '<p>我是段落</p> 一下文章'
    //div.innerText =  '<p>我是段落</p> 一下文章'
    //div.textContent =  '<p>我是段落</p> 一下文章'
  </script> -->
  <!-- <div class="box"></div>
  <script>
    var div = document.querySelector('div');
    //设置html页面中的内容
    div.innerHTML =  '<p>我是段落</p> 一下文章'
    //div.innerText =  '<p>我是段落</p> 一下文章'
    //div.textContent =  '<p>我是段落</p> 一下文章'
  </script> -->
  <!-- <div style="width: 200px; height: 200px; background-color: red"></div>
  <div></div>
  <script>
    //1.获取div
    var div = document.querySelector('div');
    console.log(div.style);
    div.style.backgroundColor = 'pink';
    div.style.width = '200px';
    div.style.height = '200px';
  </script> -->
  <!-- <div class="box">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
  </div>
  <script>
    var imgs = document.querySelectorAll('img')
    var body = document.querySelector('body')
    for(var i = 0 ; i < imgs.length; i++){
      imgs[i].onclick = function(){
        body.style.backgroundImage = 'url('+this.src+')'
      }
    }
  </script> -->
  <!-- <div class="box">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
  </div>
  <script>
    var imgs = document.querySelectorAll('img');
    var body = document.querySelector('body')
    for(var i = 0; i < imgs.length; i++){
      imgs[i].onclick = function(){
        body.style.backgroundImage = 'url('+this.src+')'
      }
    }
  </script> -->
  <!-- <div>我是div</div>
  <input type="button" value="点击添加样式">
  <script>
    var div = document.querySelector('div');
    var btn = document.querySelector('input');
    btn.onclick = function(){
      div.classList.add('box','one');
    }
  </script> -->
  <!-- <div class="box one">我是div</div>
  <input type="button" value="点击移除样式">
  <script>
    var div = document.querySelector('div');
    var btn = document.querySelector('input');
    btn.onclick = function(){
      div.classList.remove('one')
    }
  </script> -->
  <!-- <div class='box one'>我是div</div>
  <input type="button" value="点击切换样式">
  <script>
    var div = document.querySelector('div');
    var btn = document.querySelector('input');
    btn.onclick = function(){
      div.classList.toggle('one')
    }
  </script> -->
  <!-- <div class="box one">我是div</div>
  <input type="button" value="点击判断是否有这个类名">
  <script>
    var div = document.querySelector('div');
    var btn = document.querySelector('input');
    btn.onclick = function(){
      //判断标签是否具有某个类名
      alert(div.classList.contains('box'))
    }
  </script> -->
  <!-- <div class="nav">
    <div class="w">
      <ul>
        <li><a href="#" class="active">首页</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">课程介绍</a></li>
      </ul>
    </div>
  </div>
  <script>
    var a = document.querySelectorAll('a')
    for(var i = 0 ;i<a.length; i++){
      a[i].onclick = function(){
        //现将原来具有active样式移除掉（排他法）
        // for(var j = 0; j<a.length; j++){
        //   a[j].classList.remove('active')
        // }
        //获取已经具有active样式的标签
        // var active_dom = document.querySelector('.active')
        // active_dom.classList.remove('active')
        //以上的简便写法
        document.querySelector('.active').classList.remove('active')
        this.classList.add('active')
      }
    }
  </script> -->
  <!-- <div class="nav">
    <div class="w">
      <ul>
        <li><a href="#" class="active">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
      </ul>
    </div>
  </div>
  <script>
    var a_btn = document.querySelectorAll('.w a')
    for(var i = 0; i<a_btn.length; i++ ){
      a_btn[i].onclick = function(){
        //方法一 排他法
        // for(var j = 0; j<a_btn.length; j++){
        //   a_btn[j].classList.remove('active')
        // }
        //方法二 获取有active类名的标签 之后移除
        document.querySelector('.active').classList.remove('active')
        a_btn[i].classList.add('active')
      }
    }
  </script> -->
  <!-- <div class="nav">
    <div class="w">
      <ul>
        <li><a href="javascript:;" class="active">首页</a></li>
        <li><a href="javascript:;">联系我们</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">课程介绍</a></li>
      </ul>
    </div>
  </div>
  <script>
    var a_btn = document.querySelectorAll('a');
    for(var i = 0; i < a_btn.length; i++){
      a_btn[i].onclick = function(){
        //方法一 使用排他法 将带有active类名的标签 去掉active这个类名
        // for(var j = 0; j < a_btn.length; j++){
        //   a_btn[j].classList.remove('active');
        // }
        // this.classList.add('active');

        // 方法二 获取带有active类名的标签 之后再移除带有这个类名的标签
        // var active_btn = document.querySelector('.active');
        // active_btn.classList.remove('active');
        // 方法二 写成一句
        // document.querySelector('.active').classList.remove('active');
        // this.classList.add('active')

        //方法三 使用className的方法 使用for循环 移除active类名
        // for(var j = 0; j < a_btn.length; j++){
        //   a_btn[j].className = '';
        // }
        // this.className = 'active';

        //方法四 使用calssName的方法 先获取active类名的标签 在移除
        document.querySelector('.active').className = '';
        this.className = 'active';
      }
    }
  </script> -->
  <!-- 表单控件相关操作 -->
  <!-- <input type="text" value="这是一个输入框">
  <input type="pasw">
  <textarea name="" id="" cols="30" rows="10"></textarea> -->
  <!-- <input type="text" value="这是一个输入框">
  <input type="button" value="按钮">
  <script>
    var input = document.querySelector('input[type="text"]');
    var btn = document.querySelector('input[type="button"]');
    btn.onclick = function(){
      console.dir(input);
      //获取表单控件的值
      console.log(input.value);
      console.log(input.defaultValue);
      //设置表单控件的值
      input.value = "你好";
      input.defaultValue = "哈哈";
    };
  </script> -->
<!-- 购物车案例 -->
  <!-- <input type="text" value="0">
  <input type="button" value="+">
  <input type="button" value="-">
  <script>
    var input = document.querySelector('input[type="text"]')
    var jia_btn = document.querySelector("input:nth-child(2)")
    var jian_btn = document.querySelector("input:nth-child(3)")

    jia_btn.onclick = function(){
      if(isNaN(input.value)===true){
        input.value = 0;
        alert('输入有误,请重新输入');
      }else{
        var sum = parseInt(input.value);
        input.value = sum + 1;
      };
    };
    jian_btn.onclick = function(){
      if(isNaN(input.value)===true || input.value <= 0){
        input.value = 0;
        alert('您输入的有误，请重新输入');
      }else{
        var sum = parseInt(input.value);
        input.value = sum - 1;
      };
    };
  </script> -->
  <!-- 购物车案例 -->
  <!-- <div>
    <input type="text" value="0">
    <input type="button" value="+">
    <input type="button" value="-">
  </div>
  <script>
    var input = document.querySelector("input[type='text']")
    var add = document.querySelector("input:nth-child(2)")
    var sub = document.querySelector("input:nth-child(3)")
    
    add.onclick = function(){
      var sum = input.value
      if(isNaN(sum)===true){
        input.value = 0;
        alert('请重新输入');
      }else{
        input.value = parseInt(sum) + 1;
      }
    } 
    sub.onclick = function(){
      if(isNaN(input.value)===true || input.value <= 0){
        input.value = 0;
        alert('您输入的有误，请重新输入')
      }else{
        var sum = parseInt(input.value);
        input.value = sum - 1;
      }
    }
  </script> -->
  <!-- <div>
    <input type="text" value="0">
    <input type="button" value="+">
    <input type="button" value="-">
  </div>
  <script>
    var input = document.querySelector('input[type="text"]');
    var add = document.querySelector('input:nth-child(2)');
    var sub = document.querySelector('input:nth-child(3)');
    add.onclick = function(){
      if(isNaN(input.value)){
        input.value = 0;
        alert('输入有误 请重新输入');
      }else{
        var sum = parseInt(input.value);
        input.value = sum + 1;
      }
    }
    sub.onclick =function(){
      // console.log(!isNaN(input.value))
      if(!isNaN(input.value)===true){
        if(parseInt(input.value) <= 0){
          alert('输入有误 哈哈哈')
        }else{
          var sum =  parseInt(input.value);
          input.value = sum - 1;
        }
      }else{
        alert('输入有误 请重新输入')
      }
    }
  </script> -->
  <!-- 设置获取表单控件状态 -->
  <!-- <input type="text" disabled="">
  <input type="text" readonly=""> -->
<!-- <input type="text" >
<input type="text" >
<input type="button" value="按钮">
<script>
  var input_one = document.querySelector("input:nth-child(1)")
  var input_two = document.querySelector("input:nth-child(2)")
  var btn = document.querySelector('input[type="button"]')
  console.dir(input_one)
  btn.onclick = function(){
    //获取当前输入框的状态
    alert(input_one.disabled) //获取到的值是 false 表示表单控件可以输入
    alert(input_two.readOnly) //获取到的值是 false 表示表单控件可以输入

    //设置当前输入框的状态
    input_one.disabled = true; //给表单控件设置 禁用效果 表单控件为true不能输入
    input_two.readOnly = true; //给表单控件设置 禁用效果 表单控件为true不能输入
  }
</script> -->
<!-- <input type="checkbox" id="ck">复选框
<input type="button" value="按钮" id="btn">
<script>
  var input = document.getElementById('ck');
  var btn = document.getElementById('btn');
  btn.onclick = function(){
    //获取当前复选框的状态
    alert(input.checked); //获取到的值是 false 表示复选框控件未选中的状态

    //设置当前复选框的状态
    input.checked = true; //给复选框设置 选中效果 复选框控件为 true 表示选中状态
  }
</script> -->
<!-- <select name="" id="">
  <option value="">北京</option>
  <option value="">天津</option>
  <option value="">上海</option>
  <option value="">重庆</option>
</select>
<script>
  var option_one = document.querySelector("option:nth-child(1)")
  var option_two = document.querySelector("option:nth-child(2)")
  var select = document.querySelector('select')
  //获取下拉列表框的状态
  console.log(option_one.selected) //获取到的值 是true 表示下拉列表框是选中状态(下拉列表框中 默认第一项是选中状态 所以是true)
  console.log(option_two.selected) //获取到的值 是false 表示下拉列表框未选中状态
  console.log(select.selected) // undefined (dom对象这里指标签 通过属性访问 (对象.属性) 本身没有这个属性 返回值是undefined)
  
  //设置当前下拉列表框的选中状态
  option_two.selected = true;
  console.log(option_one.selected) //设置状态后 获取到的值是 false
  console.log(option_two.selected) //设置状态后 获取到的值是 true
</script> -->

<table>
  <tr>
    <td><input type="checkbox" value="1"></td>
    <td>商品</td>
  </tr>
  <tr>
    <td class="tbody"><input type="checkbox" value="2"></td>
    <td>iPhone8</td>
  </tr>
  <tr>
    <td class="tbody"><input type="checkbox" value="3"></td>
    <td>iPhone9</td>
  </tr>
  <tr>
    <td class="tbody"><input type="checkbox" value="4"></td>
    <td>iPhoneX</td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="反选">
    </td>
  </tr>
</table>
<script>
//实现全选功能
var ck_all = document.querySelector("tr:nth-child(1) input")
var tbody_all = document.querySelectorAll(".tbody input")
var btn_re = document.querySelector("input[type='button']")
var inputs = document.querySelectorAll('input')
//全选效果
ck_all.onclick = function(){
  for(var i = 0; i < tbody_all.length; i++){
    tbody_all[i].checked = this.checked;
  }
}
//完成单选效果(如果都选中 全选被选中, 否则全选按钮不被选中)
for(var i = 0; i < tbody_all.length; i++){
  tbody_all[i].onclick = function(){
    var flag = true;
    for(var j = 0; j < tbody_all.length; j++){
      if(!tbody_all[j].checked){
       flag = false
      }
    }
    ck_all.checked = flag;
  }
}
//完成反选功能
btn_re.onclick = function(){
  var flag = true;
  for(var i = 0; i < tbody_all.length; i++){
    if(tbody_all[i].checked){
      tbody_all[i].checked = false;
      flag = false;
    }else{
      tbody_all[i].checked = true;
    }
  }
  ck_all.checked = flag;
}
</script>


</body>
</html> 